<template>
    <Header></Header>
    <div class="my-box">
        <div class="sk-hp-top">
            <!-- 个人中心头部碎片文件 -->
            <div class="cp-contain-box clearfix">
                <!-- 用户信息 -->
                <div class="cp-head-queue-info">
                    <img style="" :src="userInfo?.avatar || 'https://cdn3.saikr.com/img/avatar/default.png'" :alt="userInfo?.nickName" />
                    <div class="cp-head-por-card-box">
                        <p>
                            <span class="username">{{ userInfo?.nickName || "未填写" }}</span>
                            <img
                                class="js-open-level"
                                style="height: 18px; margin-top: -2px; width: auto"
                                src="https://cdn3.saikr.com/img/level/new/Lv0@3x.png?v=2024041306"
                                alt=""
                                levenergy="0"
                            />
                        </p>
                        <p>
                            <svg
                                t="1714032172823"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="4526"
                                width="26"
                                height="26"
                            >
                                <path
                                    d="M516.5 530.6m-428.9 0a428.9 428.9 0 1 0 857.8 0 428.9 428.9 0 1 0-857.8 0Z"
                                    fill="#078F99"
                                    p-id="4527"
                                ></path>
                                <path
                                    d="M516.5 530.6m-393.7 0a393.7 393.7 0 1 0 787.4 0 393.7 393.7 0 1 0-787.4 0Z"
                                    fill="#FFFFFF"
                                    p-id="4528"
                                ></path>
                                <path d="M512 530.6m-353.9 0a353.9 353.9 0 1 0 707.8 0 353.9 353.9 0 1 0-707.8 0Z" fill="#078F99" p-id="4529"></path>
                                <path
                                    d="M503.7 518.6c-100.6 0-149.9 64.6-149.9 64.6v134s51.3 50.3 157.8 50.3c106.5 0 142-50.3 142-50.3v-134s-49.3-64.6-149.9-64.6z m2 220.2c-69.7 0-126.2-17.1-126.2-38.3 0-21.1 56.5-38.3 126.2-38.3S632 679.3 632 700.5c-0.1 21.1-56.6 38.3-126.3 38.3z"
                                    fill="#FFFFFF"
                                    p-id="4530"
                                ></path>
                                <path
                                    d="M177.3 489.9l149.9 73s72.5-89.7 172.6-89.7c97.7 0 194.3 89.7 194.3 89.7l54.2-27.5V616c-8.6 3.5-14.8 13.1-14.8 24.6 0 11.7 6.4 21.3 15.1 24.7l-16 54.3h47.3l-16.2-54.7c7.8-4 13.2-13.3 13.2-24.2 0-10.7-5.3-19.8-12.8-23.9v-89.3l78.9-39.9-347.2-189-318.5 191.3z"
                                    fill="#FFFFFF"
                                    p-id="4531"
                                ></path>
                            </svg>
                            <span class="school">{{ userInfo?.degree || "未填写" }} {{ userInfo?.sex ? "男" : "女" }}</span>
                        </p>
                    </div>
                </div>
                <div class="position-box r-t new show">
                    <div class="sk-pw-fans-info-con">
                        <a class="sk-pw-fans-atical num">
                            <span class="data"> 0 </span>
                            <p>关注</p>
                        </a>
                        <a class="sk-pw-fans-event num">
                            <span class="data"> 0 </span>
                            <p>粉丝</p>
                        </a>
                        <a class="sk-pw-fans-praise num">
                            <span class="data">0</span>
                            <p>访客</p>
                        </a>
                    </div>
                    <div @click="router.push('/redact-user-info')" class="cp-head-btn-box">
                        <el-icon size="18">
                            <EditPen />
                        </el-icon>
                        <span>编辑资料</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav">
            <div class="list">
                <RouterLink :to="`part-in-contest`" exact-active-class="activate" class="list-item">
                    <div>竞赛</div>
                </RouterLink>
                <RouterLink :to="`part-in-events`" exact-active-class="activate" class="list-item">
                    <div>活动</div>
                </RouterLink>
                <RouterLink :to="`part-in-blog`" exact-active-class="activate" class="list-item">
                    <div>文章</div>
                </RouterLink>
            </div>
        </div>
        <router-view :key="$route.fullPath" />
    </div>
    <FixedMenu />
    <Footer></Footer>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getLoginUserInfo } from "@/api/user";
import { useRouter } from "vue-router";
const router = useRouter();
let userInfo = ref();
let loading = ref(true);

onMounted(async () => {
    // 请求获取用户信息
    getLoginUserInfo().then(({ data }) => {
        userInfo.value = data.data;
        loading.value = false;
    });
});
</script>
<style lang="scss" scoped>
/* 定义过渡样式 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
.my-box {
    margin: 40px auto;
    width: 1080px;
    box-sizing: border-box;
    .sk-hp-top {
        .cp-contain-box {
            padding: 20px;
            border: 1px #ddd solid;
            display: flex;
            justify-content: space-between;

            .position-box {
                .sk-pw-fans-info-con {
                    display: flex;
                }

                .cp-head-btn-box {
                    width: fit-content;
                    padding: 10px 30px;
                    background-color: $main-color;
                    border-radius: 4px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    cursor: pointer;
                    font-size: 18px;
                    font-weight: 900;
                    cursor: pointer;
                    span {
                        padding-left: 10px;
                    }
                }
            }
        }

        .sk-pw-fans-info-con {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;

            a {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 50px;
                font-weight: 900;
                color: #7c7575;
                text-align: center;
            }
        }

        .cp-head-queue-info {
            height: 114px;
            display: flex;
            align-items: center;

            .username {
                font-size: 28px;
                font-weight: 900;
                color: #555555;
                padding-right: 10px;
            }

            > img {
                margin-right: 20px;
                padding: 4px;
                border: 1px #ddd solid;
                width: 114px;
                height: 114px;
                border-radius: 50%;
            }

            .cp-head-por-card-box {
                p {
                    height: 40px;
                    display: flex;
                    align-items: center;
                }

                .school {
                    color: #777777;
                }
            }
        }
    }

    .nav {
        margin-top: 40px;
        border: 1px #ddd solid;
        .list {
            display: flex;
            width: 100%;
        }
        .list-item {
            flex: 1;
            text-align: center;
            padding: 20px 0;
            cursor: pointer;
            height: 60px;
            &:hover {
                border-bottom: 3px $main-color solid;
            }
        }
        .activate {
            border-bottom: 3px $main-color solid;
        }
    }
}
</style>
